<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .edit-container{
            display: flex;
        }
        .tools{
            width: 200px;
            height: 100vh;
            border: 1px solid black;
        }
        .content{
            width: calc(100vw - 200px);
            height: 100vh;
            border: 1px solid black;
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        .box-copy{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
        }

        .selected {
            border: 2px dashed #ff0000;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
        }

        /* 连线相关样式 */
        .connection-point {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #ff5722;
            border-radius: 50%;
            cursor: pointer;
            z-index: 5;
        }
    </style>
</head>
<body>

<div class="edit-container">
    <div class="tools">
        <div class="box"  id="box" draggable="true">5</div>
    </div>
    <div id="editor" class="content">

    </div>

</div>

<script>
    let editor = document.getElementById("editor");
    let box = document.getElementById("box");
    let clientX;
    let clientY;


    box.addEventListener("dragstart",e=>{
        e.dataTransfer.setData("text",box.innerText)
        clientX=e.clientX-box.getBoundingClientRect().left;
        clientY=e.clientY-box.getBoundingClientRect().top
    })
    editor.addEventListener("dragenter",e=>{
    })
    editor.addEventListener("dragover",e=>{
        e.preventDefault()
    })

    editor.addEventListener("dragleave",e=>{

    })
    editor.addEventListener("drop",e=>{

        let text=e.dataTransfer.getData("text")

        let div=document.createElement("div")
        div.className="box-copy"
        div.innerText=text
        //让div像表单标签一样可以拥有焦点事件
        div.setAttribute("tabindex","0")


        div.style.left=(e.clientX-editor.getBoundingClientRect().left-clientX)+"px"
        div.style.top=e.clientY-editor.getBoundingClientRect().top-clientY+"px"

        div.addEventListener("mousedown",e=>{
            // console.log(e,777)
            // console.log(e.clientX - editor.getBoundingClientRect().left,e.clientY-editor.getBoundingClientRect().top);
            div.className=div.className+" selected"
            createPoint(div,editor);
        })

        div.addEventListener("blur",e=>{
            div.className=div.className.replace("selected","")
        })

        editor.appendChild(div)

    })

    function createPoint(div,editor){
        const positions = [
            { x: '50%', y: '0%', name: 'top' },
            { x: '100%', y: '50%', name: 'right' },
            { x: '50%', y: '100%', name: 'bottom' },
            { x: '0%', y: '50%', name: 'left' }
        ];

        let clientX,clientY;

        positions.forEach(position=>{
            let positionDiv = document.createElement("div");
            positionDiv.style.left=position.x;
            positionDiv.style.top=position.y;
            positionDiv.className="connection-point"
            positionDiv.style.transform = 'translate(-50%, -50%)';
            positionDiv.addEventListener("mousedown",e=>{
                console.log(e.clientX - editor.getBoundingClientRect().left,e.clientY-editor.getBoundingClientRect().top);
                clientX=e.clientX - editor.getBoundingClientRect().left;
                clientY=e.clientY-editor.getBoundingClientRect().top;

                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                svg.setAttribute("width","1000px")
                svg.setAttribute("height","1000px")

                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute("d",`M ${clientX} ${clientY} Q 200 500 300 100`)
                path.setAttribute("fill","none")
                path.setAttribute("stroke","black")
                path.setAttribute("stroke-width","2")
                svg.appendChild(path)

                editor.appendChild(svg)
            })


            positionDiv.addEventListener("mousemove",e=>{
                console.log(e)
            })
            div.appendChild(positionDiv)
        })
    }


</script>
</body>
</html>